<!doctype html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户登录</title>
    <style>
        span{
            color: red;
        }
    </style>
</head>
<body>
<a href="notice.html">公告</a>
<div align="center">
    <h1>用户登录</h1><br />
    <hr>
    <br>
    <br>

        账号：<input type="text" name="username" id="username"/>
        <br />
        密码：<input type="password" name="password" id="password"/>
        <br />
        <span id="showSpan"></span>
        <br />
        <input type="button" value="登录" id="butt"/>

    <br />
    <a href="register.html">注册</a>                    <a href="resetPassword.html">忘记密码？</a>
</div>


<script >
/*在js中使用数据。
* */


    window.onload=function (){

        const username=document.getElementById('username');
        const pass=document.getElementById('password');
        const showSpan=document.getElementById('showSpan');
        const butt=document.getElementById('butt');
        /*

         test
         :当文本框不输入内容时，默认是'';
         */

        butt.onclick=function (){

            /*
             1、用户文本框，当点提交时，若用户名为空，span显示请输入用户名。
             2、当用户名不为空时，若密码为空，显示请输入密码。
             3、当密码不为空，检查用户名格式是否满足正则表达式。若不满足，显示用户名只能由数字和字母组成。
             4、若满足，密码不满足，显示密码只能由用户名和密码组成。
             */

            const exp=/^[a-zA-Z0-9]+$/;
            if(username.value==''){
                showSpan.innerHTML='请输入用户名';
            }else{
                if(pass.value==''){
                    showSpan.innerHTML='请输入密码';
                }else{
                    if(!(exp.test(username.value))){
                        showSpan.innerHTML='用户名只能由数字和字母组成，请检查用户名格式';
                    }else{
                        if(!(exp.test(pass.value))){
                            showSpan.innerHTML='密码只能由数字和字母组成，请检查密码格式';
                        }else{
                            showSpan.innerHTML='';

                            /*
                             在这里使用ajax即可
                            1、响应ajax,当用户名不存在时，在span下显示当前用户名不存在。
                            2、当用户存在，密码不正确，显示密码错误。
                           */
                            //1、创建对象
                            const xhr=new XMLHttpRequest();
                            //2、绑定事件
                            xhr.onreadystatechange=function(){
                                /*test*/
                                console.log(xhr.readyState);
                                if(xhr.readyState==4&&xhr.status==200){
                                    /*
                                    处理服务端返回的数据，处理。返回的只能是数据，而不是视图
                                    */
                                    /*handle*/
                                    const data=xhr.responseText;
                                    console.log(data);
                                    if(data=='正在登录...'){
                                        showSpan.innerHTML='';
                                        document.location.href='/library01/list';
                                    }else if(data=='密码错误'){
                                        showSpan.innerHTML=data;
                                    }else{
                                        showSpan.innerHTML=data;
                                    }
                                }

                            }
                            const str="login?username="+username.value+"&&password="+pass.value;
                            //3、open
                            xhr.open("get",str,true);
                            //4、send
                            xhr.send();
                        }
                    }

                }

            }

        }

    }


</script>
</body>

</html>